<template>
  <h1>Hello Vue3</h1>
  <h2>数量：{{ number }}</h2>
  <button @click="btn">点击加1</button>
</template>

<script>
/* 
  目标：初体验 Vue3 组合式 API 写法
*/
import { ref } from 'vue'
export default {
  name: 'App',
  /* 🔔Vue3 推荐写法：组合式API */
  // 🔔 setup 是Vue3中非常重要的配置项，组合式API的起点，组合式API写setup里面
  setup() {
    // 🔔 通过 ref 创建响应式数据
    const number = ref(0)
    const btn = () => {
      // 🔔 注意这里是 .value
      number.value++
    }
    // 🔔 在页面中绑定的数据和函数，都要 return 出来
    return { number, btn }
    // 🎃PS：编程习惯调整，Vue3 项目中几乎不用 this.（几千行项目代码都不出现几次 this）
  },
}
</script>

<style></style>
